<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随笔</title>
    <link rel="icon" href="../jpg/ram.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" href="../css/demo.css" type="text/css">
    <link href="../css/bootstrap1.css" rel="stylesheet" type="text/css" media="all">
    <link href="../css/bolg.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>

    <div class="menu">
        <div class="left">
            <ul>
                <li><img src="../jpg/demo3.png"></li>
                <li><a href="../index.html">首页</a></li>
                <li>
                    <a href="#">随笔</a>
                </li>
                <li>
                    <a href="../webs/fun.html">娱乐</a>
                </li>
                <li><a href="../webs/record.html">留言</a></li>
                <li><a href="../webs/resume.html">个人中心</a></li>

            </ul>

        </div>
        <div class="right">
            <ul>

                <li>
                    <a href="../webs/set.html" target="_blank"> <img src="../jpg/set.png" width="30px" height="30px"></a>
                </li>
                <li>
                    <a href="../webs/sign.html" target="_blank">
                        <img src="../jpg/logon.png" width="30px" height="30px">
                    </a>
                </li>
                <li>
                    <input type="text" placeholder="请输入..." name="" id="" value="" style="border-top-left-radius: 15px;
                    border-top-right-radius: 15px;
                    border-bottom-left-radius: 15px;
                    border-bottom-right-radius: 15px;" />&nbsp;&nbsp;
                    <a href="../webs/find.html" target="_blank"><button style="border-top-left-radius: 12px;
                    border-top-right-radius: 12px;
                    border-bottom-left-radius: 12px;
                    border-bottom-right-radius: 12px;">搜</button>
                    </a>
                </li>

            </ul>
        </div>
    </div>

    <div class="main">
        <!-- 添加创建文章按钮 -->
        <div class="create-post-btn" style="position: fixed; top: 80px; right: 30px; z-index: 1000;">
            <button id="createPostBtn" class="btn btn-primary" style="padding: 12px 30px; border-radius: 25px; background-color: #007bff; color: white; border: none; cursor: pointer; font-size: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
                ✍️ 写文章
            </button>
        </div>

        <!-- 创建文章的表单（默认隐藏） -->
        <div id="createPostForm" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 800px; width: 90%; margin: 20px auto; padding: 30px; background: white; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.2); z-index: 1001;">
            <h2 style="margin-bottom: 20px; color: #333; text-align: center;">创建新文章</h2>
            <form id="postForm">
                <div style="margin-bottom: 20px;">
                    <label for="postTitle" style="display: block; margin-bottom: 8px; color: #666; font-weight: bold;">文章标题</label>
                    <input type="text" id="postTitle" required style="width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px;">
                </div>
                <div style="margin-bottom: 20px;">
                    <label for="postContent" style="display: block; margin-bottom: 8px; color: #666; font-weight: bold;">文章内容</label>
                    <textarea id="postContent" required style="width: 100%; height: 300px; padding: 12px; border: 2px solid #ddd; border-radius: 8px; resize: vertical; font-size: 16px;"></textarea>
                </div>
                <div style="text-align: right;">
                    <button type="button" id="cancelPost" style="padding: 10px 20px; margin-right: 10px; border: 2px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-size: 16px;">取消</button>
                    <button type="submit" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px;">发布文章</button>
                </div>
            </form>
        </div>

        <!-- 文章列表容器 -->
        <div id="postsList" style="max-width: 1200px; margin: 100px auto 0; padding: 0 20px;">
            <h2 style="text-align: center; margin-bottom: 30px; color: #333;">我的文章</h2>
            <div id="postsContainer" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
                <!-- 文章卡片将通过JavaScript动态添加 -->
            </div>
        </div>

        <!-- 文章详情模态框（默认隐藏） -->
        <div id="postDetailModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 800px; width: 90%; margin: 20px auto; padding: 30px; background: white; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.2); z-index: 1001;">
            <div id="postDetailContent">
                <h2 id="detailTitle" style="margin-bottom: 20px; color: #333;"></h2>
                <div id="detailMeta" style="margin-bottom: 20px; color: #666; font-size: 14px;"></div>
                <div id="detailContent" style="margin-bottom: 20px; line-height: 1.6;"></div>
                <div style="text-align: right;">
                    <button id="editPostBtn" style="padding: 10px 20px; margin-right: 10px; border: 2px solid #007bff; border-radius: 8px; background: white; color: #007bff; cursor: pointer; font-size: 16px;">编辑</button>
                    <button id="deletePostBtn" style="padding: 10px 20px; margin-right: 10px; border: 2px solid #dc3545; border-radius: 8px; background: white; color: #dc3545; cursor: pointer; font-size: 16px;">删除</button>
                    <button id="closeDetailBtn" style="padding: 10px 20px; border: 2px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-size: 16px;">关闭</button>
                </div>
            </div>
        </div>

        <!-- 编辑文章表单（默认隐藏） -->
        <div id="editPostForm" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 800px; width: 90%; margin: 20px auto; padding: 30px; background: white; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.2); z-index: 1002;">
            <h2 style="margin-bottom: 20px; color: #333; text-align: center;">编辑文章</h2>
            <form id="editForm">
                <input type="hidden" id="editPostId">
                <div style="margin-bottom: 20px;">
                    <label for="editTitle" style="display: block; margin-bottom: 8px; color: #666; font-weight: bold;">文章标题</label>
                    <input type="text" id="editTitle" required style="width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px;">
                </div>
                <div style="margin-bottom: 20px;">
                    <label for="editContent" style="display: block; margin-bottom: 8px; color: #666; font-weight: bold;">文章内容</label>
                    <textarea id="editContent" required style="width: 100%; height: 300px; padding: 12px; border: 2px solid #ddd; border-radius: 8px; resize: vertical; font-size: 16px;"></textarea>
                </div>
                <div style="text-align: right;">
                    <button type="button" id="cancelEdit" style="padding: 10px 20px; margin-right: 10px; border: 2px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-size: 16px;">取消</button>
                    <button type="submit" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px;">保存修改</button>
                </div>
            </form>
        </div>

        <div class="container">
            <!-- EIGHTH EXAMPLE -->
            <div class="col-md-3 bann-left">
                <div class="view view-eighth">
                    <img src="../jpg/b11.jpg" class="img-responsive" alt="" />
                    <div class="mask">
                        <h2>及时行乐</h2>

                    </div>
                </div>
            </div>
            <div class="col-md-6 bann-right">
                <div class="view1 view-eighth">
                    <img src="../jpg/b1.jpg" class="img-responsive" alt="" />
                    <div class="mask">
                        <h2>走歌人</h2>
                        <p> 暗杠全国巡演</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 bann-left">
                <div class="view view-eighth">
                    <img src="../jpg/b3.jpg" class="img-responsive" alt="" />
                    <div class="mask">
                        <h2>黑超</h2>
                        <p>正义联盟扎克导演版 </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 bann-right">
                <div class="view1 view-eighth">
                    <img src="../jpg/b4.jpg" class="img-responsive" alt="" />
                    <div class="mask">
                        <h2>叙防空系统</h2>
                        <p>叙防空系统对来袭导弹进行拦截</p>

                    </div>
                </div>
            </div>
            <div class="col-md-3 bann-left">
                <div class="view view-eighth">
                    <img src="../jpg/b7.jpg" class="img-responsive" alt="" />
                    <div class="mask">
                        <h2>黑足山治</h2>
                        <p> 最强厨子和他的最强藻岚</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 bann-left">
                <div class="view view-eighth">
                    <img src="../jpg/b6.jpg" class="img-responsive" alt="" />
                    <div class="mask">
                        <h2>南京南京</h2>
                        <p> 南京地铁以及游玩地图</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- header -->
    <!-- instructors -->
    <div class="instructors">
        <div class="container">
            <div class="col-md-4 instru-left">
                <h3>随笔</h3>
                <div class="inst-top">
                    <div class="ins-lef">
                        <img src="../jpg/b2.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="ins-righ">
                        <h4>丹妮一发·陈格利安</h4>
                        <p> 前设计院院花，直播界泥石流，不睡者，，斗鱼主机区的解放者</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="inst-top1">
                    <div class="ins-lef">
                        <img src="../jpg/b14.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="ins-righ">
                        <h4>及时行乐</h4>
                        <p>把握当下,及时行乐</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="inst-top2">
                    <div class="ins-lef">
                        <img src="../jpg/b12.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="ins-righ">
                        <h4>克鲁格效应</h4>
                        <p>倾向于高估自己的能力水平;无法认知他人真正的能力;无法认知且正视自身的不足 </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="col-md-8 instru-right">
                <div class="training">
                    <div class="tra-left">
                        <img src="../jpg/b8.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="tra-right">
                        <h3>读书
                        </h3>
                        <h5>电影的口音 贾樟柯谈贾樟柯</h5>
                        <p>本书是著名中国电影研究专家白睿文对贾樟柯电影的集中访谈，以年代为序，集中探讨了从《小山回家》《小武》到《江湖儿女》等10部重要的电影，也是贾导电影人生的梳理与总结。书中，贾樟柯亲述从汾阳走向世界背后的动人经历，分享每一部经典作品背后的传奇故事、创作缘起与理念；记录各个创作时期对电影的探索与思考，对于社会、现实的关怀和反思。</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="sructs">
                    <h6>游记</h6>
                    <li><img src="../jpg/b10.jpg" class="img-responsive" alt="" /></li>
                    <li><img src="../jpg/b15.jpg" class="img-responsive" alt="" /></li>
                    <li><img src="../jpg/b16.jpg" class="img-responsive" alt="" /></li>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- instructors -->
    <!-- have -->
    <div class="container">
        <div class="have">
            <h3>南京先锋书店于1996年在南京创立</h3>
            <div class="col-md-4 have-left">

                <p> 是国内知名的民营学术书店，自创立以来探索出一条以"学术、文化沙龙、咖啡、艺术画廊、电影、音乐、创意、生活、时尚"为主题的文化创意品牌书店经营模式，搭建一座可供开放、探讨、分享的公共性平台。其为读者打造的建筑之元素、宗教之情结、人文之关怀的书店阅读空间，吸引了众多国内外读者的聚集，使其成为南京重要的文化地标。</p>
            </div>
            <div class="col-md-4 have-middle">
                <img src="../jpg/b9.jpg" class="img-responsive" alt="">
            </div>
            <div class="col-md-4 have-left">
                <h4>先锋书店</h4>
                <ul>
                    <li><a href="#"><span></span>先锋书店是南京的著名文化名片</a></li>
                    <li><a href="#"><span></span>先锋书店被南京市民评为十二张文化名片之一 </a></li>
                    <li><a href="#"><span></span>先锋书店被誉为"中国最美的书店"</a></li>
                    <li><a href="#"><span></span>荣获"中国2009年度最美的书店奖" </a></li>
                    <li><a href="#"><span></span>南京大学的学生亲切地称她为"南大第二图书馆 </a></li>
                    <li><a href="#"><span></span>美国《国家地理》评选出全球十大书店</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="copyright">
        <p>Copyright &copy; 2021.芥子 by八斗
        </p>
    </div>

    <script>
        // API基础URL
        const API_BASE_URL = 'http://localhost:5000/api';

        // 获取token
        function getToken() {
            return localStorage.getItem('token');
        }

        // 检查是否登录
        function checkLogin() {
            const token = getToken();
            if (!token) {
                alert('请先登录');
                window.location.href = 'sign.html';
                return false;
            }
            return true;
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        // 加载文章列表
        async function loadPosts() {
            try {
                const response = await fetch(`${API_BASE_URL}/posts`);
                if (response.ok) {
                    const posts = await response.json();
                    const container = document.getElementById('postsContainer');
                    container.innerHTML = '';
                    
                    posts.forEach(post => {
                        const postCard = document.createElement('div');
                        postCard.className = 'post-card';
                        postCard.style.cssText = 'background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s;';
                        postCard.innerHTML = `
                            <h3 style="margin: 0 0 10px; color: #333;">${post.title}</h3>
                            <p style="color: #666; margin: 0 0 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">${post.content}</p>
                            <div style="color: #999; font-size: 14px;">
                                <span>作者: ${post.author.username}</span>
                                <span style="margin-left: 10px;">${formatDate(post.createdAt)}</span>
                            </div>
                        `;
                        
                        postCard.addEventListener('click', () => showPostDetail(post._id));
                        container.appendChild(postCard);
                    });
                }
            } catch (error) {
                console.error('加载文章列表失败:', error);
            }
        }

        // 显示文章详情
        async function showPostDetail(postId) {
            try {
                const response = await fetch(`${API_BASE_URL}/posts/${postId}`);
                if (response.ok) {
                    const post = await response.json();
                    document.getElementById('detailTitle').textContent = post.title;
                    document.getElementById('detailMeta').innerHTML = `
                        <span>作者: ${post.author.username}</span>
                        <span style="margin-left: 10px;">发布时间: ${formatDate(post.createdAt)}</span>
                    `;
                    document.getElementById('detailContent').textContent = post.content;
                    
                    // 存储当前文章ID
                    document.getElementById('editPostId').value = postId;
                    
                    // 显示详情模态框
                    document.getElementById('postDetailModal').style.display = 'block';
                }
            } catch (error) {
                console.error('加载文章详情失败:', error);
            }
        }

        // 显示/隐藏创建文章表单
        document.getElementById('createPostBtn').addEventListener('click', function() {
            if (!checkLogin()) return;
            document.getElementById('createPostForm').style.display = 'block';
        });

        // 取消创建文章
        document.getElementById('cancelPost').addEventListener('click', function() {
            document.getElementById('createPostForm').style.display = 'none';
            document.getElementById('postForm').reset();
        });

        // 提交文章
        document.getElementById('postForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            if (!checkLogin()) return;
            
            const title = document.getElementById('postTitle').value;
            const content = document.getElementById('postContent').value;
            
            if (!title.trim() || !content.trim()) {
                alert('请填写文章标题和内容');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/posts`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${getToken()}`
                    },
                    body: JSON.stringify({
                        title: title,
                        content: content
                    })
                });
                
                if (response.ok) {
                    const result = await response.json();
                    alert('文章发布成功！');
                    document.getElementById('createPostForm').style.display = 'none';
                    document.getElementById('postForm').reset();
                    loadPosts(); // 重新加载文章列表
                } else {
                    const error = await response.json();
                    alert(error.message || '发布文章失败');
                }
            } catch (error) {
                console.error('发布文章失败:', error);
                alert('发布文章失败，请稍后重试');
            }
        });

        // 关闭文章详情
        document.getElementById('closeDetailBtn').addEventListener('click', function() {
            document.getElementById('postDetailModal').style.display = 'none';
        });

        // 编辑文章按钮
        document.getElementById('editPostBtn').addEventListener('click', async function() {
            const postId = document.getElementById('editPostId').value;
            try {
                const response = await fetch(`${API_BASE_URL}/posts/${postId}`);
                if (response.ok) {
                    const post = await response.json();
                    document.getElementById('editTitle').value = post.title;
                    document.getElementById('editContent').value = post.content;
                    document.getElementById('postDetailModal').style.display = 'none';
                    document.getElementById('editPostForm').style.display = 'block';
                }
            } catch (error) {
                console.error('加载文章详情失败:', error);
            }
        });

        // 取消编辑
        document.getElementById('cancelEdit').addEventListener('click', function() {
            document.getElementById('editPostForm').style.display = 'none';
            document.getElementById('editForm').reset();
        });

        // 提交编辑
        document.getElementById('editForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            if (!checkLogin()) return;
            
            const postId = document.getElementById('editPostId').value;
            const title = document.getElementById('editTitle').value;
            const content = document.getElementById('editContent').value;
            
            if (!title.trim() || !content.trim()) {
                alert('请填写文章标题和内容');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/posts/${postId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${getToken()}`
                    },
                    body: JSON.stringify({
                        title: title,
                        content: content
                    })
                });
                
                if (response.ok) {
                    alert('文章更新成功！');
                    document.getElementById('editPostForm').style.display = 'none';
                    document.getElementById('editForm').reset();
                    loadPosts(); // 重新加载文章列表
                } else {
                    const error = await response.json();
                    alert(error.message || '更新文章失败');
                }
            } catch (error) {
                console.error('更新文章失败:', error);
                alert('更新文章失败，请稍后重试');
            }
        });

        // 删除文章
        document.getElementById('deletePostBtn').addEventListener('click', async function() {
            if (!confirm('确定要删除这篇文章吗？')) return;
            
            const postId = document.getElementById('editPostId').value;
            
            try {
                const response = await fetch(`${API_BASE_URL}/posts/${postId}`, {
                    method: 'DELETE',
                    headers: {
                        'Authorization': `Bearer ${getToken()}`
                    }
                });
                
                if (response.ok) {
                    alert('文章删除成功！');
                    document.getElementById('postDetailModal').style.display = 'none';
                    loadPosts(); // 重新加载文章列表
                } else {
                    const error = await response.json();
                    alert(error.message || '删除文章失败');
                }
            } catch (error) {
                console.error('删除文章失败:', error);
                alert('删除文章失败，请稍后重试');
            }
        });

        // 页面加载时获取文章列表
        document.addEventListener('DOMContentLoaded', loadPosts);
    </script>
</body>

</html>